<template>
    <div class="allCustomersDetailsCont">
      <!-- 服务人员 搜索 -->
      <!-- <Select
        v-model="servicePersonnelObj.caseId"
        placeholder="请选择服务人员"
        filterable
        @on-select="servicePersonnelFun"
        style="width: 300px;">
        <Option v-for="(item, index) in autoCompleteList" :value="item.caseId" :key="index">{{ item.userName +' - '+item.buildingAlias}}</Option>
      </Select> -->
      <!-- 客户进度-->
      <div class="customerProgress clearfix">
        <div class="customerInfo">
          <span class="avatar">
            <img :src="basicInformatData.more&&basicInformatData.more.gender=='women'?'https://media.tongcehaofang.com/image/default/32FFED3EFB744B0D9F77163E447E7A8D-6-2.jpg':basicInformatData.more&&basicInformatData.more.gender=='man'?'https://media.tongcehaofang.com/image/default/018AD2AEA540497582F506D08111AFCC-6-2.jpg':'https://media.tongcehaofang.com/image/default/BA7EDA2214C144AD9C94228999EEB579-6-2.png'" alt="">
            <!-- <strong>{{basicInformatData.more&&basicInformatData.more.intentionLevel || '-'}}</strong> -->
          </span>
          <span class="avatarSan">{{basicInformatData.customerName||'-'}}</span>
          <span class="avatarSan">{{ basicInformatData.customerPhone}}</span>
          <span class="avatarSan">{{stepslist[stepsCurrent]}}</span>
        </div>
        <div class="customer_feature">
          <span class="label_customer_feature">客户特征：</span>{{basicInformatData.customerFeature||'-'}}
        </div>
        <!-- <div class="customerStep">
          <Steps :current="stepsCurrent" size="small">
            <Step v-for="(item, index) in stepslist" :key="index" :title="item" ></Step>
          </Steps>
        </div> -->
      </div>
      <!--个人信息展示-->
      <Tabs v-model="personalInformation" :animated="false">
        <TabPane class="tab_pane" label="客户信息" name="BasicInformation" v-if="appId == 36 ? essentialInformation : unlocking('客户管理', '1000001')">
          <!-- 基本信息 -->
          <BasicHomeCustomer :comNames="'BasicInformation'" :servicePersonnelId="servicePersonnelObj"></BasicHomeCustomer>
          <!-- 置业需求 -->
          <BasicHomeCustomer :comNames="'HomeDemand'" :servicePersonnelId="servicePersonnelObj"></BasicHomeCustomer>
          <!-- 服务信息 -->
          <BasicHomeCustomer :comNames="'ServiceInformation'" :servicePersonnelId="servicePersonnelObj"></BasicHomeCustomer>
          <!-- 客户画像 -->
          <BasicHomeCustomer :comNames="'CustomerPortrait'" :servicePersonnelId="servicePersonnelObj"></BasicHomeCustomer>
        </TabPane>

        <TabPane label="跟进&批注" name="FollowUpRecord" v-if="customeFollowUp">
          <DetailsFollowUpRecord :servicePersonnelId="servicePersonnelObj" v-if="personalInformation === 'FollowUpRecord'"></DetailsFollowUpRecord>
        </TabPane>
        
        <TabPane label="客户动态" name="CustomerTrajectory" v-if="CustomerLocus && appId != 49">
          <DetailsCustomerTrajectory :servicePersonnelId="servicePersonnelObj" v-if="personalInformation === 'CustomerTrajectory'"></DetailsCustomerTrajectory>
        </TabPane>
      </Tabs>
    </div>
</template>
<script>
  import { userServes, businessUsers, customerDetailsInfo, customerinfoHeadList, customerFindSpecial } from "@/api/customerManagement.js";
  import tool from "@/common/tool"
  import Helper from "@/common/helper.js"
  import DetailsBasicInformation from './components/DetailsBasicInformation'
  import DetailsCustomerPortrait from './components/DetailsCustomerPortrait'
  import DetailsCustomerTrajectory from './components/DetailsCustomerTrajectory'
  import DetailsFollowUpRecord from './components/DetailsFollowUpRecord'
  import DetailsHomeDemand from './components/DetailsHomeDemand'
  import TransactionInformation from './components/TransactionInformation'
  import BasicHomeCustomer from './components/BasicHomeCustomer'
  export default {
    components: {
      DetailsBasicInformation,
      DetailsCustomerPortrait,
      DetailsCustomerTrajectory,
      DetailsFollowUpRecord,
      DetailsHomeDemand,
      TransactionInformation,
      BasicHomeCustomer
    },
    data() {
        return {
          customeFollowUp: false,
          CustomerLocus: false,
          specialresDetails: "",
          essentialInformation: false,
          realEstateDemand: false,
          serviceInfoShow: false,
          customerPortraitShow: false,
          buyingSignal:false,
          appId: '',
          categoryList: ['-', '跟进计划', '首看回访', '复看回访', '日常回访', '-','操作', '线上互动', '留资', '回访', '邀约到访', '来人'],
          servicePersonnelObj: {
            servicePersonnelVal: '',
            caseId: '',
            customerType: '',
            buildingId: '',
            cityCode: '',
            phone: ''
          },
          customerType: '',
          caseId: '',
          basicInformatData: "",
          autoCompleteList: [],
          stepsCurrent: -1,
          stepslist: [],
          // stepslistD: ['预约', '首访', '回笼', '验资', '认筹', '意向金', '认购', '签约', '付款', '交房'],  // 德勤
          // stepslistDEnglish: ['APPOINTMENT', 'FIRST_VISIT', 'STEAM_AGAIN', 'CAPITAL_VERIFICATION', 'PLEDGED', 'INTENTION_MONEY', 'SUBSCRIPTION', 'SIGN', 'PAYMENT', 'DELIVERY'],
          stepslistD: ['未到访', '首访', '回笼',  '认购', '签约', '回款', '交房'],  // 德勤
          stepslistDEnglish: ['APPOINTMENT', 'FIRST_VISIT', 'STEAM_AGAIN',  'SUBSCRIPTION', 'SIGN', 'PAYMENT', 'DELIVERY'],
          personalInformation: 'BasicInformation',
        }
    },
    methods: {
      
      servicePersonnelFun(val) {
        this.autoCompleteList.map((item)=> {
          if(item.caseId == val.value) {
            this.servicePersonnelObj.caseId = val.value
            this.servicePersonnelObj.servicePersonnelVal = item.userId
            this.servicePersonnelObj = Object.assign({}, this.servicePersonnelObj)
          }
        })
      },
      
      // 初始化获取数据
      initData() {
        // 查询客户服务人员列表
        let parm = {
          customerId: this.$route.query.id || this.$route.query.customerId,
          buildingId: this.$route.query.buildingId
        }
        userServes(parm).then(res=>{
          if (res && res.list) {
            this.autoCompleteList = res.list
            let parameterOne = {
              servicePersonnelVal: '',
              caseId: '',
              customerType: this.appId
            }
            if (this.$route.query.buildingId) {
              res.list.map((item, index) => {
                if (item.caseId == this.$route.query.buildingId) {
                  parameterOne.servicePersonnelVal = res.list[index] && res.list[index].userId,
                  parameterOne.caseId = res.list[index] && res.list[index].caseId
                }
              })
            } else {
              parameterOne.servicePersonnelVal = res.list[0] && res.list[0].userId,
              parameterOne.caseId = res.list[0] && res.list[0].caseId
            }
            let buildingId = this.$route.query.buildingId;
            console.log('buildingId',buildingId)

            // 基本信息
            customerDetailsInfo({
              userCustomerId: this.$route.query.userCustomerId
            }).then(res=>{
              
              if (res) {
                console.log(res,'头部信息')
                this.basicInformatData = res
                customerFindSpecial({
                  customerId: this.$route.query.customerId,
                  //buildingId: res.buildingId
                  buildingId
                }).then(specialres => {
                  console.log(specialres,'基本信息');
                  if (specialres) {
                    this.specialresDetails = specialres
                    // 判断德勤显示栏目
                    if (this.appId == 36) {
                      
                      if(this.$route.query.isFollow){
                        console.log('我是从follow');
                        this.personalInformation = 'FollowUpRecord'
                      }else{
                        this.personalInformation = 'BasicInformation'
                      }
                      customerinfoHeadList({
                        //buildingId: res.buildingId
                        buildingId
                      }).then(res => {
                        this.essentialInformation = true  // 基本信息
                        console.log("=====9*9999=====",res,"11111111")

                        // res.list.forEach((item) => {
                        //   if ((item.optionIdHead || item.companyRules == 1) && item.infoType == 3) {// 置业需求
                        //     this.realEstateDemand = true
                        //   } else if ((item.optionIdHead || item.companyRules == 1) && item.infoType == 2) {// 服务信息
                        //     this.serviceInfoShow = true
                        //   } else if ((item.optionIdHead || item.companyRules == 1) && item.infoType == 4) {// 客户画像
                        //     this.customerPortraitShow = true
                        //   }
                        // })
                        res.list.forEach((item) => {
                          if (item.infoType == 3 && item.validate==1) {// 置业需求
                            this.realEstateDemand = true
                          } else if ( item.infoType == 2 && item.validate==1) {// 服务信息
                            this.serviceInfoShow = true
                          } else if (item.infoType == 4 && item.validate==1) {// 客户画像
                            this.customerPortraitShow = true
                          }
                        })
                        this.customeFollowUp = true
                        this.CustomerLocus = true
                        this.buyingSignal = true
                      })
                    }
                    this.servicePersonnelObj.status = res.status
                    if (parameterOne.customerType == 36) {
                      this.stepslist = this.stepslistD
                      if (res.more.status) {
                        console.log(res.more.status,'res.more.status');
                        this.stepsCurrent = this.stepslistDEnglish.findIndex((value)=> value === res.more.status)
                      } else {
                        this.stepsCurrent = -1
                      }
                    } 
                    let parameterTwo = {
                     // buildingId: res.buildingId,
                     buildingId,
                      cityCode: specialres.cityCode,
                      phone: res.customerPhone,
                      status: res.status,
                      name: res.customerName,
                      buildingAlias: specialres.buildingAlias
                    }
                    businessUsers({
                      page: 1,
                      rows: 10,
                      buildingId: parameterTwo.buildingId,
                      positionType: 2
                    }).then(resU=>{
                      let parameterThree = {
                        storeManager: false
                      }
                      if (resU && resU.list) {
                        resU.list.map((item) => {
                          if (item.userId == JSON.parse(tool.getStorage('userMess')).userId) {
                            parameterThree.storeManager = true
                          }
                        })
                        this.servicePersonnelObj = Object.assign({}, parameterOne, parameterTwo, parameterThree)
                      } else {
                        this.servicePersonnelObj = Object.assign({}, parameterOne, parameterTwo, parameterThree)
                      }
                    }).catch(err=>{
                      this.$Message.error(err)
                    })
                  }
                }).catch(err=>{
                  this.$Message.error(err)
                })
              }
            }).catch(err=>{
              this.$Message.error(err)
            })
          }
        }).catch(err=>{
          this.$Message.error(err)
        })
      }
    },
    computed: {

    },
    created() {
      this.appId = JSON.parse(tool.getStorage('userMess')).appId
      // 初始化获取数据
      this.initData()
    },
    mounted() {

    },
  }
</script>
<style lang="scss" scoped>
  .allCustomersDetailsCont{
    padding: 14px;
    .ivu-tabs {
      overflow: visible;
    }
    .customerProgress{
      margin:14px 0;
      .customer_feature{
        width:100%;
        font-size: 16px;
        line-height: 25px;
        margin-top: 15px;
        float: left;
        .label_customer_feature{
          font-size: 18px;
          color: #194fe8;
        }
      }
      .customerInfo{
        float: left;
        line-height: 40px;
        display: flex;
        .avatarSan{
          margin: 0 14px;
        }
        .avatar{
          display: inline-block;
          width: 40px;
          height: 40px;
          position: relative;
          border-radius: 50%;
          overflow: hidden;
          img {
            width: 100%;
            height: 100%;
            display: block;
          }
          strong {
            position: absolute;
            left: 0;
            bottom: 0;
            display: block;
            width: 100%;
            height: 14px;
            line-height: 14px;
            text-align: center;
            font-weight: normal;
            color: #fff;
            background-color:rgba(0,0,0,0.4);
            font-size: 12px;
          }
        }
      }
      .customerStep{
        float: left;
        width: 760px;
        margin-left: 40px;
        margin-top: 12px;
      }
      .subscribeClass{
        float: left;
        margin-left: 40px;
        margin-top: 4px;
      }
    }
  }
  .clearfix:after{
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  .tab_pane{
    /deep/.ivu-form-item-label{
      color: #999999;
      width: 120px;
    }
  }
</style>
